<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
	<title>编辑文章-爱慈善</title>
	<!-- Favicon and Touch Icons -->
	<link href="common/favicon.png" rel="shortcut icon" type="image/png">
	<link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

	<link rel="stylesheet" href="background/modules/summernote/summernote-lite.css">
	<link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
	<link rel="stylesheet" href="background/css/demo.css">
	<link rel="stylesheet" href="background/css/style.css">
	<!--引入Jquery-->
	<script src="common/js/jquery-3.4.1.js"></script>
	<!--引入MarkDown-->
	<link rel="stylesheet" type="text/css" href="common/EditorMD/lib/codemirror/codemirror.min.css" />
	<link rel="stylesheet" type="text/css" href="common/EditorMD/css/editormd.css" />
	<script src="background/js/message.js"></script>

</head>

<body>
<div id="app">
	<div class="main-wrapper">
		<div class="navbar-bg"></div>
		<div th:replace="commons/admin-bar::navbar(currUri='new-article')"></div>
		<div th:replace="commons/admin-bar::sidebar(currUri='new-article')"></div>

		<div class="main-content">
			<section class="section">
				<h1 class="section-header">
					<div><i class="ion ion-ios-book"></i> 编辑文章</div>
				</h1>
				<div class="row">
					<div class="col-lg-12 col-md-12 col-12" style="height: 800px">
						<input id="title" name="title" th:value="${article.title}" type="text" style="margin-bottom: 10px" class="form-control" autocomplete="off" placeholder="填写文章标题">
						<div id="editormd">
							<textarea id="content" name="content" style="display:none;">[[${article.content}]]</textarea>
						</div>
						<input type="hidden" id="imgPath" name="imgPath">
						<input type="hidden" id="id" th:value="${article.id}">
					</div>
				</div>
				<div class="row" style="margin-top: 80px">
					<div class="col-lg-12 col-md-12 col-12">
						<div class="card mb-3">
							<div class="card-body">
								<div class="row">
									<div class="col-lg-6 col-md-6 col-6">
										<div class="card-body">
											<div class="row">
												<div class="col-lg-6 col-md-6 col-6">
													<img id="cover_img" class="img-thumbnail" style="width:300px; height:160px;" th:src="${article.img}">
												</div>
												<div class="col-lg-6 col-md-6 col-6">
													<div class="card-header">
														上传文章封面
													</div>
													<div class="card-body">
														<input type="file" class="form-control" id="cover" onchange="uploadCover()">
													</div>
													<div class="card-footer">
														<small class="text-danger">若未上传封面，系统将随机设置封面！</small>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="col-lg-6 col-md-6 col-6">
										<div class="card-header">
											请选择参与的活动
										</div>
										<div class="card-body">
											<select class="form-control" id="activityId">
												<option th:if="${activity != null}" th:value="${activity.id}" selected>
													【 [[${activity.title}]] 】
												</option>
												<option value="-1">不参加任何活动</option>
												<option th:value="${temp.id}" th:each="temp:${activities}">
													【 [[${temp.title}]] 】
												</option>
											</select>
										</div>
										<div class="card-footer">
											<button class="btn btn-success" onclick="updateArticle()">更新文章</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<div th:replace="commons/admin-bar::footer"></div>
	</div>
</div>

<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/popper.js"></script>
<script src="background/modules/tooltip.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>

<script src="background/modules/chart.min.js"></script>
<script src="background/modules/summernote/summernote-lite.js"></script>

<script src="background/js/scripts.js"></script>
<script src="background/js/custom.js"></script>

<!--引入MarkDown-->
<script type="text/javascript" src="common/EditorMD/editormd.amd.min.js"></script>
<script type="text/javascript">
	var editor;
	$(function () {
		editor = editormd("editormd", {
			placeholder : "此处开始编写文章的内容...",
			path: 'common/EditorMD/lib/',
			saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
			/**上传图片相关配置如下*/
			imageUpload: true,
			imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL: "image/article",//注意你后端的上传图片服务地址
			toolbarIcons : function() {
				// Or return editormd.toolbarModes[name]; // full, simple, mini
				return ["undo", "redo", "|", "bold", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block", "table", "html-entities", "|", "watch", "preview", "clear", "|", "help"]
			},
			taskList: true,
			tocm: true,         // Using [TOCM]
			tex: true,                   // 开启科学公式TeX语言支持，默认关闭
			flowChart: true,             // 开启流程图支持，默认关闭
			sequenceDiagram: true,
			codeFold : true,
			watch : true
		});
		//监听粘贴服务
		document.addEventListener('paste', function (event) {
			var items = (event.clipboardData || window.clipboardData).items;
			var file = null;
			if (items && items.length) {
				// 搜索剪切板items
				for (var i = 0; i < items.length; i++) {
					if (items[i].type.indexOf('image') !== -1) {
						file = items[i].getAsFile();
						break;
					}
				}
			} else {
				alert("当前浏览器不支持");
				return;
			}
			if (!file) {
				return;
			}
			// 此时file就是我们的剪切板中的图片对象
			// 这里是上传
			var xhr = new XMLHttpRequest();
			// 上传结束
			xhr.onload = function () {

			};
			xhr.onerror = function () {
				alert("网络异常，上传失败!");
			};
			var formData = new FormData();
			formData.append("editormd-image-file", file);
			xhr.open('POST', 'image/article', true);
			xhr.send(formData);
			xhr.onreadystatechange = function () {
				if(xhr.readyState === 4){
					if(xhr.status >=200 && xhr.status < 300 || xhr.status === 304){
						//5.处理返回的结果
						var obj = xhr.responseText;
						var objarr = eval("("+obj+")");
						if (objarr["success"] == 1){
							editor.insertValue("![](" + objarr["url"] + ")");
						}else{
							alert("粘贴图片失败!");
						}
					}
				}
			}
		});
	});
</script>
<script src="common/js/article.js"></script>
</body>
</html>
